/* 导入组件样式 */
@import 'components/nav.css';

/* 主题颜色 */
:root {
  --primary-color: #3b82f6;
  --primary-hover: #2563eb;
  --secondary-color: #8b5cf6;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --info-color: #6366f1;
}

/* 按钮样式 */
.btn-primary {
  @apply px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg 
         hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 
         focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out
         disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-secondary {
  @apply px-4 py-2 bg-gray-100 text-gray-700 rounded-lg border border-gray-300
         hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 
         focus:ring-opacity-50 transition duration-300 ease-in-out;
}

.btn-success {
  @apply px-4 py-2 bg-green-500 text-white rounded-lg
         hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500
         focus:ring-opacity-50 transition duration-300 ease-in-out;
}

.btn-warning {
  @apply px-4 py-2 bg-yellow-500 text-white rounded-lg
         hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500
         focus:ring-opacity-50 transition duration-300 ease-in-out;
}

.btn-danger {
  @apply px-4 py-2 bg-red-500 text-white rounded-lg
         hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500
         focus:ring-opacity-50 transition duration-300 ease-in-out;
}

/* 卡片样式 */
.card {
  @apply bg-white rounded-lg shadow-lg p-6 transition duration-300 ease-in-out
         hover:shadow-xl;
}

.card-header {
  @apply text-xl font-semibold mb-4;
}

.card-body {
  @apply space-y-4;
}

/* 表单样式 */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input {
  @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm
         focus:border-blue-500 focus:ring-blue-500;
}

.form-select {
  @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm
         focus:border-blue-500 focus:ring-blue-500;
}

/* 动画效果 */
.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-in;
}

/* 加载动画 */
.loading {
  @apply flex items-center justify-center;
}

.loading-spinner {
  @apply animate-spin h-5 w-5 text-white;
}

/* 通知提示 */
.toast {
  @apply fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white
         transform transition-all duration-300 ease-in-out;
}

.toast-success {
  @apply bg-green-500;
}

.toast-error {
  @apply bg-red-500;
}

.toast-warning {
  @apply bg-yellow-500;
}

.toast-info {
  @apply bg-blue-500;
}

/* 图表容器 */
.chart-container {
  @apply w-full h-full bg-white rounded-lg shadow-lg p-4;
}

/* 数据表格 */
.data-table {
  @apply min-w-full divide-y divide-gray-200;
}

.data-table th {
  @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.data-table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
}

.data-table tr:nth-child(even) {
  @apply bg-gray-50;
}

.data-table tr:hover {
  @apply bg-gray-100;
}

/* 标签 */
.tag {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.tag-blue {
  @apply bg-blue-100 text-blue-800;
}

.tag-green {
  @apply bg-green-100 text-green-800;
}

.tag-red {
  @apply bg-red-100 text-red-800;
}

.tag-yellow {
  @apply bg-yellow-100 text-yellow-800;
}

/* 进度条 */
.progress {
  @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-bar {
  @apply bg-blue-500 rounded-full h-2 transition-all duration-300;
}

/* 工具提示 */
.tooltip {
  @apply invisible absolute;
}

.has-tooltip:hover .tooltip {
  @apply visible z-50;
}

/* 模态框 */
.modal {
  @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full
         flex items-center justify-center;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl p-6 m-4 max-w-xl w-full;
}

.modal-header {
  @apply text-xl font-bold mb-4;
}

.modal-body {
  @apply mb-4;
}

.modal-footer {
  @apply flex justify-end space-x-2;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  @apply w-2;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 rounded-full;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

/* 响应式布局辅助类 */
.responsive-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.responsive-flex {
  @apply flex flex-col md:flex-row;
}

/* 页面过渡动画 */
.page-enter {
  @apply opacity-0;
}

.page-enter-active {
  @apply opacity-100 transition-opacity duration-300;
}

.page-exit {
  @apply opacity-100;
}

.page-exit-active {
  @apply opacity-0 transition-opacity duration-300;
}